<template>
  <div id="app">
    <!-- 全局导航栏 -->
    <el-header>
      <el-menu
        mode="horizontal"
        :default-active="activeMenu"
        @select="handleMenuSelect"
      >
        <el-menu-item index="/">首页</el-menu-item>
        <el-menu-item index="/signin">签到</el-menu-item> <!-- 新增签到菜单项 -->
        <el-menu-item index="/login">登录</el-menu-item>
        <el-menu-item index="/register">注册</el-menu-item>
      </el-menu>
    </el-header>

    <!-- 路由视图 -->
    <router-view />
    
    <!-- 全局页脚 -->
    <el-footer>
      <div class="footer-content">
        © 2024 签到应用 - All Rights Reserved
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const activeMenu = ref(router.currentRoute.value.path);

const handleMenuSelect = (index) => {
  router.push(index);
};
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

el-header {
  background-color: #409EFF;
  color: white;
  padding: 0 20px;
}

el-footer {
  background-color: #f4f4f4;
  text-align: center;
  padding: 10px 0;
}

.footer-content {
  font-size: 14px;
}
</style>
